
<template>
  <el-row class="tac">
  <el-col :span="12">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      >
     
      <el-menu-item v-for="menu in obj.childMenu" 
        :key="menu.id"
        :index="menu.id"
        @click="sendTarget(menu.target)">
        <i class="el-icon-setting"></i>
        <template #title >{{menu.title}}</template>
      </el-menu-item>
    </el-menu>
  </el-col>
 
</el-row>

</template>

<script>
import {
  reactive,
} from 'vue';

  export default {
    setup(props,{attrs,slots,emit}){
      const obj=reactive({
        isCollapse: false,
        childMenu: [],
        target: ''
      });

      const setLeftMenu = (childMenu) => {
        obj.childMenu = childMenu;
        sendTarget(childMenu[0].target);
      }

      const sendTarget=(target)=>{
          obj.target = target;
          emit('getTarget',target )
      };
      return { 
        setLeftMenu,
        obj,
        sendTarget
      } 
    } 
  }
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>
